<template>
    <div class="addSystem">
        <!--添加数据弹出层-->
        <div class="toolbar">
            <Modal
                    v-model="showEditForm"
                    title="添加"
                    :loading="loading"
                    :mask-closable="maskClosable"
                    :closable="false"
            >
                <div slot="header">
                    <div class="ivu-modal-header-inner">新增功能</div>
                    <a class="ivu-modal-close" @click="cancel(editInfoData)"><i class="ivu-icon ivu-icon-ios-close-empty"></i></a>
                </div>
                <Form   v-if="editInfoData" ref="editInfoData" :model="editInfoData" :label-width="80" :rules="ruleCustom" >
                    <FormItem label="系统名称:" prop="funSysName">
                        <Select v-model="model1" placeholder="请选择系统"  >
                            <Option v-for="(item,index) in systemName" :value="item.value" :key="item.value">{{ item.sysName }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="所属菜单:" prop="sysName">
                        <Select v-model="model1" placeholder="请选择功能所属二级菜单"  >
                            <Option v-for="(item,index) in systemName" :value="item.value" :key="item.value">{{ item.sysName }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="功能名称:" prop="funName">
                        <Input class="modalInput" v-model="editInfoData.funName" placeholder="功能名称"></Input>
                    </FormItem>
                    <FormItem label="关键字:" prop="funKeyword">
                        <Input class="modalInput"  v-model="editInfoData.funKeyword" placeholder="关键字"></Input>
                    </FormItem>
                    <FormItem label="功能说明:" prop="funDescribe">
                        <Input class="modalInput"  v-model="editInfoData.funDescribe" placeholder="功能说明"></Input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="primary" size="large" :loading="modalLoading"  @click="ok('editInfoData')" >确定</Button>
                    <Button size="large" @click="cancel">取消</Button>

                </div>
            </Modal>
        </div>

    </div>
</template>

<script>
    import util from '../../libs/util'
    export default {
        name: 'addSystem',
        data () {
            return {
                loading: true,
                modalLoading:false,
                maskClosable:false,
                model1: '',
                editInfoData: null,
                systemName: [
                    {
                        value: 'xuanz',
                        sysName: '请选择系统名称'
                    },
                    {
                        value: 'zg',
                        sysName: '租管'
                    },
                    {
                        value: 'jr',
                        sysName: '金融'
                    },
                    {
                        value: 'zhzx',
                        sysName: '账户中心'
                    },
                    {
                        value: 'jszx',
                        sysName: '结算中心'
                    }
                ],
                ruleCustom: {
                    funName: [
                        { required: true, message: '请填写系统名称', trigger: 'blur' }
                    ],
                    funKeyword: [
                        { required: true, message: '请填写关键字', trigger: 'blur' }
                    ]
                }
            }
        },
        props: ['showEditForm','data'],
        methods: {
            ok (name) {
//        var self = this;
//        this.$emit("changeShow", self.showAddForm);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let url = '/react-service/api/houseInfo/getDetail.do'
                        /*获取到添加的数据*/
                        alert('添加的数据为' + JSON.stringify(this.addData))
                        let data = this.addData
                        console.log(this.addData)
                        /*请求接口*/
                        util.ajax.post(url, data).then((res) => {
                            console.log(res)
                        })
                        this.$emit('reset', true)
                        /*获取最新数据*/
//                       this.getInfo()
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            cancel() {
                this.$emit('reset')
            }
        },
        watch: {
            showEditForm() {
                if(this.showEditForm) {
                    this.editInfoData = this.data;
                }
            }
        }
    }
</script>


<style scoped>

</style>
